<template>
  <el-dialog
    :model-value="visible"
    title="选择订单"
    width="900px"
    :close-on-click-modal="false"
    @close="handleClose"
    @update:model-value="close">
    <div class="order-selection-container">
      <!-- 订单搜索区域 -->
      <div class="search-container">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="订单编号">
            <el-input
              :model-value="searchForm.orderNumber"
              placeholder="请输入订单编号"
              clearable
              @keyup.enter="handleSearch"
              @input="handleOrderNumberInput" />
          </el-form-item>
          <el-form-item label="客户名称">
            <el-input
              :model-value="searchForm.customerName"
              placeholder="请输入客户名称"
              clearable
              @keyup.enter="handleSearch"
              @input="handleCustomerNameInput" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 订单列表 -->
      <el-table
        :data="orderList"
        border
        v-loading="loading"
        @selection-change="handleSelectionChange"
        ref="orderTableRef">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="order_number" label="订单编号" width="150" />
        <el-table-column label="客户名称" min-width="150">
          <template #default="{ row }">
            {{ row.customer && row.customer.customer_name || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="产品名称" min-width="150">
          <template #default="{ row }">
            {{ row.product && row.product.product_name || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="数量" width="80" />
        <el-table-column prop="total_amount" label="订单金额" width="100">
          <template #default="{ row }">
            ¥{{ row.total_amount }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getOrderStatusTagType(row.status)">
              {{ getOrderStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <!-- 订单分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 40, 100]"
          @current-change="handlePageChange"
          @size-change="handleSizeChange" />
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button
          type="primary"
          @click="confirmSelection"
          :disabled="selectedRows.length === 0">
          确定选择 ({{ selectedRows.length }} 项)
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'

// 定义props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  orderList: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  total: {
    type: Number,
    default: 0
  },
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  selectedRows: {
    type: Array,
    default: () => []
  },
  searchForm: {
    type: Object,
    default: () => ({
      orderNumber: '',
      customerName: ''
    })
  },
  getOrderStatusText: {
    type: Function,
    default: () => '-'
  },
  getOrderStatusTagType: {
    type: Function,
    default: () => 'info'
  }
})

// 定义emits
const emit = defineEmits([
  'update:visible',
  'update:searchForm',
  'search',
  'reset',
  'page-change',
  'size-change',
  'selection-change',
  'confirm',
  'close'
])

// 表格引用
const orderTableRef = ref(null)

// 处理订单编号输入
const handleOrderNumberInput = (value) => {
  emit('update:searchForm', { ...props.searchForm, orderNumber: value })
}

// 处理客户名称输入
const handleCustomerNameInput = (value) => {
  emit('update:searchForm', { ...props.searchForm, customerName: value })
}

// 关闭对话框
const handleClose = () => {
  emit('close')
}

// 关闭对话框
const close = () => {
  emit('update:visible', false)
}

// 搜索按钮点击事件处理函数
const handleSearch = () => {
  emit('search')
}

// 重置按钮点击事件处理函数
const handleReset = () => {
  emit('update:searchForm', { orderNumber: '', customerName: '' })
  emit('reset')
}

// 页码改变事件处理函数
const handlePageChange = (page) => {
  emit('page-change', page)
}

// 每页条数改变事件处理函数
const handleSizeChange = (size) => {
  emit('size-change', size)
}

// 处理表格行选择变化
const handleSelectionChange = (selection) => {
  emit('selection-change', selection)
}

// 确认选择
const confirmSelection = () => {
  emit('confirm')
}
</script>

<style scoped>
.order-selection-container {
  min-height: 400px;
}

.search-container {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

.pagination-container {
  text-align: right;
  margin-top: 20px;
}

.dialog-footer {
  text-align: right;
}
</style>
